feat: container info sidebar and add sidebar updates by navinkarkera · Pull Request #2830 · openedx/frontend-app-authoring

navinkarkera · 2026-01-20T14:42:04Z

Description

screencast.mp4

Adds section, subsection and unit sidebar info tab in course outline as described in Course Outline: Section/Subsections/Unit Info Sidebar #2638
Updates the sidebar design and behaviour as per Course outline: Add sidebar updates #2826
Updates course outline to use react query and removes redux store usage as much as possible. Updated parts that require absolutely cannot work without redux without heavy refactoring (will require quiet some time) to work in tandem with react-query.
Due to above change, this PR has a lot of refactor to make sure data is properly synced in outline after any action.

Following items are not implemented:

Course Outline: Make sections/subsections/units selectable #2665 which is part of Course Outline: Section/Subsections/Unit Info Sidebar #2638 but could not be implemented here due to lack of time.
Showing component add sidebar when user selects unit and opens add sidebar, this depends on completion of unit add sidebar.
Also, the unit preview in sidebar shows edit and other action buttons, although they do not work, i.e., the preview is read only but removing the buttons and action menu's would require additional time and effort.

Apologies for the huge number of changes, could be help it due to migrating parts to react-query

Supporting information

Depends on refactor: xblock api upstream info and course details api openedx-platform#37971
Course Outline: Section/Subsections/Unit Info Sidebar #2638
Course outline: Add sidebar updates #2826
Private-ref: https://tasks.opencraft.com/browse/FAL-4293
Private-ref: https://tasks.opencraft.com/browse/FAL-4296

Testing instructions

Checkout refactor: xblock api upstream info and course details api openedx-platform#37971 in platform
Verify behaviour of sidebar and design changes as per Course outline: Add sidebar updates #2826
Behaviour of add new buttons and existing buttons based on selected element.
Resize the sidebar and verify different pages in it.
Verify behaviour of info sidebar on selecting different containers in outline, it should work as described in Course Outline: Section/Subsections/Unit Info Sidebar #2638
Verify behaviour of library reference card in sidebar based on different conditions of selected container that is imported from a library.
Try unlinking, publishing, deleting, updating, syncing with library and check that all UI is updated with latest data, i.e., data is synced everywhere.

Other information

Include anything else that will help reviewers and consumers understand the change.

Does this change depend on other changes elsewhere?
Any special concerns or limitations? For example: deprecations, migrations, security, or accessibility.

Best Practices Checklist

We're trying to move away from some deprecated patterns in this codebase. Please
check if your PR meets these recommendations before asking for a review:

Any new files are using TypeScript (.ts, .tsx).
Avoid propTypes and defaultProps in any new or modified code.
Tests should use the helpers in src/testUtils.tsx (specifically initializeMocks)
Do not add new fields to the Redux state/store. Use React Context to share state among multiple components.
Use React Query to load data from REST APIs. See any apiHooks.ts in this repo for examples.
All new i18n messages in messages.ts files have a description for translators to use.
Avoid using ../ in import paths. To import from parent folders, use @src, e.g. import { initializeMocks } from '@src/testUtils'; instead of from '../../../../testUtils'

openedx-webhooks · 2026-01-20T14:42:10Z

Thanks for the pull request, @navinkarkera!

This repository is currently maintained by @bradenmacdonald.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

Details

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

codecov · 2026-01-27T07:43:23Z

Codecov Report

❌ Patch coverage is 95.44025% with 29 lines in your changes missing coverage. Please review.
✅ Project coverage is 95.21%. Comparing base (7173b71) to head (4c07979).

Files with missing lines	Patch %	Lines
src/generic/resizable/Resizable.tsx	63.33%	11 Missing ⚠️
...e-outline/outline-sidebar/LibraryReferenceCard.tsx	94.59%	4 Missing ⚠️
...-outline/outline-sidebar/OutlineSidebarContext.tsx	94.11%	3 Missing ⚠️
src/course-outline/card-header/CardHeader.tsx	90.47%	2 Missing ⚠️
src/course-outline/hooks.jsx	94.28%	2 Missing ⚠️
...tline/outline-sidebar/info-sidebar/InfoSidebar.tsx	91.30%	2 Missing ⚠️
...e/outline-sidebar/info-sidebar/UnitInfoSidebar.tsx	94.59%	2 Missing ⚠️
src/course-outline/data/apiHooks.ts	98.00%	1 Missing ⚠️
src/course-outline/outline-sidebar/AddSidebar.tsx	98.63%	1 Missing ⚠️
...se-outline/outline-sidebar/OutlineAlignSidebar.tsx	83.33%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2830      +/-   ##
==========================================
- Coverage   95.21%   95.21%   -0.01%     
==========================================
  Files        1318     1326       +8     
  Lines       30018    30338     +320     
  Branches     6543     6863     +320     
==========================================
+ Hits        28582    28886     +304     
- Misses       1379     1383       +4     
- Partials       57       69      +12

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

rpenido

First of all, awesome work here @navinkarkera!
Thanks for all the refactors! After this PR, we will be way closer to saying goodbye to our redux store.

I asked a few clarifying questions about our invalidation strategy.
Everything worked as expected, except for a small bug with the taxonomy button on the header.

rpenido · 2026-02-03T18:33:20Z

src/course-outline/card-header/CardHeader.tsx

              iconAs={EditIcon}
-              onClick={onClickEdit}
+              onClick={onEditClick}
              // @ts-ignore


I think this was fixed upstream

Suggested change

// @ts-ignore

rpenido · 2026-02-03T18:34:41Z

src/course-outline/data/api.ts

+ * @param {string} itemId
 * @returns {Promise<Object>}


I don't think we need this anymore.

Suggested change

* @param {string} itemId

* @returns {Promise<Object>}

rpenido · 2026-02-03T18:57:30Z

src/course-outline/data/apiHooks.ts

+      await callback?.(data.locator, variables.parentLocator);
+      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.parentLocator) });
+      queryClient.invalidateQueries({
+        queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(data.locator)),


Do we need to invalidate the courseDetails here? Do you know which data it sync?

Maybe this is fixing a sync issue by its side effects: refetching the course details would cause a re-render, which will resync the data.

It would be preferable that we find the root cause, or, if it is starting to become complicated, just invalidate the whole course with courseOutlineQueryKeys.course(getCourseKey(data.locator)),

@rpenido We invalidate courseDetails to update the course sync status which is displayed in status bar in course outline. I am not sure what you mean by re-render but this api is quiet small and only used in fetching course metadata (not the whole course outline).

rpenido · 2026-02-03T18:59:17Z

src/course-outline/data/apiHooks.ts

+      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(courseId) });
+      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.itemId) });


We shouldn't need to invalidate anything besides containerComparisonQueryKeys.course(courseId) here, since they all have the same predicate.

Could you check it?

Suggested change

queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(courseId) });

queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.itemId) });

No, courseOutlineQueryKeys.courseDetails is different from courseOutlineQueryKeys.course and courseOutlineQueryKeys.courseItem. They are related to fetching outline data while course details will just fetch course metadata.

If we invalidate courseOutlineQueryKeys.course(courseId), it will invalidate all course item queries unnecessarily. We only need to invalidate the item itself and the course metadata to update status bar.

My bad! I just noted that containerComparisonQueryKeys.course was a different key.

rpenido · 2026-02-03T19:00:23Z

src/course-outline/data/apiHooks.ts

+    mutationFn: publishCourseItem,
+    onSettled: async (_data, _err, itemId) => {
+      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(itemId) });
+      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(itemId)) });


Same thing with the courseDetail here

See #2830 (comment)

rpenido · 2026-02-03T20:28:54Z

src/generic/resizable/Resizable.tsx

+/**
+ * Creates a resizable box that can be dragged to resize the width from the left side.
+ */
+export const ResizableBox = ({


rpenido · 2026-02-03T20:31:22Z

src/generic/resizable/Resizable.tsx

+      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */}
+      <div className="resizable-handle" onMouseDown={onMouseDown} />


I think it would be nice to add a button/handler here. I just noticed that the sidebar was resizable after looking at the code.
Also, it should help with accessibility.

This could be discussed upstream and implemented in a follow-up task if needed.

Good point. However does the resizing really matter in accessibility?

Honestly, I have no idea.

For people who can see fine but only use a keyboard and can't use a mouse, it may be nice if there were a way to resize using the keyboard. I don't think that's a requirement here though, just something that would be a nice enhancement.

@bradenmacdonald Makes sense.

rpenido · 2026-02-03T20:32:34Z

src/generic/unlink-modal/data/apiHooks.ts

+      queryClient.invalidateQueries({
+        queryKey: courseOutlineQueryKeys.courseItemId(contentId),
+      });
+      queryClient.invalidateQueries({
+        queryKey: courseOutlineQueryKeys.courseDetails(courseKey),
+      });


Same as commented above.

See #2830 (comment)

rpenido · 2026-02-03T20:34:35Z

src/CourseAuthoringContext.tsx

+    queryClient.invalidateQueries({
+      queryKey: courseOutlineQueryKeys.courseItemId(currentSelection?.sectionId),
+    });


Why are we invalidating a section when opening a unit here?

It was used to invalidate parent data after a new unit is created but not needed anymore as it is handled in the source.

rpenido · 2026-02-03T20:41:32Z

src/course-outline/card-header/CardHeader.tsx

    const showNewSidebar = getConfig().ENABLE_COURSE_OUTLINE_NEW_DESIGN?.toString().toLowerCase() === 'true';
    if (showNewSidebar) {
-      setCurrentPageKey('align', cardId);
+      setCurrentPageKey('align');


Clicking on the taxonomy tag on the card header is crashing here:

TypeError can't access property "component", pages[currentPageKey] is undefined Call Stack Sidebar src/generic/sidebar/Sidebar.tsx:76:28 renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:27 updateFunctionComponent node_modules/react-dom/cjs/react-dom.development.js:19613:20 beginWork node_modules/react-dom/cjs/react-dom.development.js:21636:16 callCallback node_modules/react-dom/cjs/react-dom.development.js:4164:14 invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:4213:16 invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:4277:31 beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27486:28 performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26592:12 workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26501:22

@rpenido This was a weird one. My guess is that getConfig doesn't have all values set at the top level (initial render), so it decides that taxonomy is not enabled and so align page is not included in sidebar.

I had to update sidebar page provider to set the pages value inside OutlineSidebarPagesProvider which is component and so getConfig returns correct values and the align page is included. See 112b256

But this change now forces using OutlineSidebarPagesProvider and also the user of this provider has to use pages props to update sidebar pages in plugin.

Good catch!
I don't think that we need this pages props here.
A plugin could override it by nesting another Provider, the way is shown in the comment before the context.
And that way, we can have more control at the plugin to also remove pages, change order, etc..

Good catch @navinkarkera!
I would prefer that we do not use the pages prop, so we could have more flexibility (removing pages, changing order, etc..) on the plugin end.

I ported your fix (removing the props) here: 10b24e8

Done. Updated here: ee9fa58

rpenido

LGTM 👍
Thank you for your work, @navinkarkera!

I tested this using the instructions from the PR
I read through the code
I checked for accessibility issues
Includes documentation

Just left one comment about removing the pages props from the provider.

bradenmacdonald · 2026-02-05T22:31:37Z

Updates course outline to use react query and removes redux store usage as much as possible. Updated parts that require absolutely cannot work without redux without heavy refactoring (will require quiet some time) to work in tandem with react-query.

Yay, that's awesome! Is there any way to separate that into a separate PR or is it too tied in to the sidebar changes?

I'm tracking the redux removal in #2540 - could you please let me know which parts of that list I can update / link to this PR ?

bradenmacdonald · 2026-02-05T22:46:20Z

src/generic/sidebar/SidebarSection.tsx

      {icon && <Icon src={icon} className="mr-1 text-primary" size="sm" />}
      {title && (
-      <h3 className="h5 font-weight-bold text-primary mb-0">
+      <h5 className="font-weight-bold text-primary mb-0 mt-1">


Technically, to improve accessibility and browsing the document via heading navigation, this should only be an <h5> if there is also an <h4>, <h3>, <h2>, and <h1> already on the page. So it should probably stay as an <h3> or perhaps even an <h2> (if there is no <h2> above), but it can be styled using the h5 class to look like an h5.

Got it, the sidebar has an h2 (title of sidebar) so making this h3 seems like the correct option.

ChrisChV

@navinkarkera It's an incredible job! Thanks for the refactoring! It looks good; I've left some comments. I want to test the code, but I'll do that tomorrow.

ChrisChV · 2026-02-05T21:01:10Z

src/CourseAuthoringContext.tsx

+      // istanbul ignore next
+      data.shouldScroll = true;
+      // istanbul ignore next


@navinkarkera Is it necessary to have two istanbul ignore? I think it would be best to ignore the whole block

ChrisChV · 2026-02-05T21:23:11Z

src/course-outline/data/slice.ts

      });
    },
+    // istanbul ignore next
+    addUnit: (state: CourseOutlineState, { payload }) => {


@navinkarkera Is it absolutely necessary to add this? If it's too complex to remove, could you add a comment explaining how to remove it? We are actively working on removing React Redux.

Right now it is required, we cannot really remove it until we migrate the whole course outline to react-query. I'll add a comment here.

ChrisChV · 2026-02-05T21:37:52Z

src/course-outline/hooks.jsx

+              queryClient.invalidateQueries({
+                queryKey: courseOutlineQueryKeys.courseItemId(currentSelection.subsectionId),
+              });
+              queryClient.invalidateQueries({
+                queryKey: courseOutlineQueryKeys.courseItemId(currentSelection.sectionId),
+              });


@navinkarkera Thank you for all this refactoring! I know it's tiring work. We are currently migrating Redux to React Query in #2540. If you have extra CC hours, you can continue this work there.

ChrisChV · 2026-02-05T22:40:02Z

src/course-outline/outline-sidebar/info-sidebar/sharedComponents.tsx

I think we should create an info-sidebar folder and organize all the info-sidebar related components inside it. We should also add this component to that folder; it's a shared component, but it's used within the context of the info-sidebar.

Done. 480e2fa

navinkarkera · 2026-02-06T07:40:05Z

Yay, that's awesome! Is there any way to separate that into a separate PR or is it too tied in to the sidebar changes?

@bradenmacdonald Unfortunately it is not easy to separate them. I had to refactor mostly due to sync and access issues inside sidebar without fetching data multiple times.

I'm tracking the redux removal in #2540 - could you please let me know which parts of that list I can update / link to this PR ?

This PR migrates some parts of courseOutline from redux to react-query but still a lot is left.

ChrisChV · 2026-02-06T20:56:28Z

@navinkarkera I found an issue with the "Unlink from library" for units. It doesn't happen in master

https://www.loom.com/share/f276b05ccd75401f9eb202b9e68ab84a

ChrisChV · 2026-02-06T20:25:24Z

src/course-outline/outline-sidebar/info-sidebar/sharedComponents.tsx

@navinkarkera There's only one component in this file, I think it would be better to rename it: sharedComponents.tsx > InfoSection.tsx

openedx-webhooks added open-source-contribution PR author is not from Axim or 2U core contributor PR author is a Core Contributor (who may or may not have write access to this repo). labels Jan 20, 2026

openedx-webhooks added this to Contributions Jan 20, 2026

github-project-automation bot moved this to Needs Triage in Contributions Jan 20, 2026

navinkarkera force-pushed the navin/fal-4293/container-info-sidebar branch from 5f8ac0b to feba274 Compare January 20, 2026 14:53

mphilbrick211 moved this from Needs Triage to Waiting on Author in Contributions Jan 20, 2026

navinkarkera mentioned this pull request Jan 23, 2026

feat: course outline header update [FC-0114] #2823

Merged

7 tasks

navinkarkera force-pushed the navin/fal-4293/container-info-sidebar branch 2 times, most recently from 9f4a330 to 4f29a90 Compare January 27, 2026 07:26

navinkarkera force-pushed the navin/fal-4293/container-info-sidebar branch 4 times, most recently from 3ceae1c to 5590401 Compare February 1, 2026 11:14

navinkarkera marked this pull request as ready for review February 2, 2026 15:14

navinkarkera requested a review from rpenido February 2, 2026 15:18

navinkarkera mentioned this pull request Feb 2, 2026

refactor: xblock api upstream info and course details api openedx/openedx-platform#37971

Open

navinkarkera force-pushed the navin/fal-4293/container-info-sidebar branch from 2cc17aa to e685ab3 Compare February 3, 2026 07:11

rpenido suggested changes Feb 3, 2026

View reviewed changes

navinkarkera requested a review from rpenido February 4, 2026 10:14

navinkarkera force-pushed the navin/fal-4293/container-info-sidebar branch from 93f0d3a to 102034e Compare February 4, 2026 12:27

rpenido approved these changes Feb 4, 2026

View reviewed changes

bradenmacdonald reviewed Feb 5, 2026

View reviewed changes

ChrisChV reviewed Feb 5, 2026

View reviewed changes

navinkarkera added 4 commits February 6, 2026 12:06

feat: container sidebar in outline

c82482d

feat: library reference card

3d1287e

refactor: unlink modal state and handlers

d521e62

refactor: unlink action

ad81b8a

navinkarkera added 21 commits February 6, 2026 12:10

fix: failing tests

e4fd32f

test: add tests

ec2ee95

refactor: add sidebar tests

3cbd51f

fix: lint issues

c1c579c

fix: test

0ddd682

fix: coverage

858b876

fix: coverage

ba9c7aa

fix: lint issues

c44cfb4

fix: coverage

9793515

fix: flaky test

cd461c5

fix: coverage

e9d904b

refactor: close title edit form only after update is complete

2ab660e

chore: apply review suggestions

60930ca

fix: outline sidebar page provider env variable check

72f7956

fix: lint issues

5025793

fix: tests

eebafe3

fix: cycle import

4e68013

fix: tests

e2cdfa8

refactor: remove pages props from page context

5e63a5f

fix: rebase conflicts

c84d667

refactor: centralize course outline data invalidation

8a915c4

navinkarkera force-pushed the navin/fal-4293/container-info-sidebar branch from ee9fa58 to 8a915c4 Compare February 6, 2026 07:34

navinkarkera added 4 commits February 6, 2026 15:18

refactor: fix accessibility

6ec390f

refactor: move sidebar info section related files in a folder

480e2fa

chore: add comment

56152fc

fix: failing test

4c07979

bradenmacdonald mentioned this pull request Feb 6, 2026

Switch from Redux to React Query + Context #2540

Open

38 tasks

ChrisChV reviewed Feb 6, 2026

View reviewed changes

		queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(courseId) });
		queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.itemId) });

		{/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */}
		<div className="resizable-handle" onMouseDown={onMouseDown} />

Conversation

navinkarkera commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Supporting information

Testing instructions

Other information

Best Practices Checklist

Uh oh!

openedx-webhooks commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

rpenido left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rpenido left a comment

Choose a reason for hiding this comment

Uh oh!

bradenmacdonald commented Feb 5, 2026

Uh oh!

bradenmacdonald Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ChrisChV left a comment

Choose a reason for hiding this comment

navinkarkera commented Jan 20, 2026 •

edited

Loading

openedx-webhooks commented Jan 20, 2026 •

edited

Loading

codecov bot commented Jan 27, 2026 •

edited

Loading

bradenmacdonald Feb 5, 2026 •

edited

Loading

navinkarkera commented Feb 6, 2026 •

edited

Loading

ChrisChV commented Feb 6, 2026 •

edited

Loading